<script setup lang="ts">
import {ref,onMounted} from 'vue'
const barRefs=ref<HTMLElement>()
const speed=ref<number>(1)
const timer=ref<number>(0)

onMounted(()=>{
  // startloading()
  // endloading()
})


const startloading=()=>{
  const dom=barRefs.value as HTMLElement;
  speed.value=1
  timer.value=window.requestAnimationFrame(function fn(){
    if(speed.value<100){
      speed.value+=1
      dom.style.width=speed.value+"%"
      //执行递归
      timer.value=window.requestAnimationFrame(fn)
    }else{
      speed.value=1
      //取消动画
      window.cancelAnimationFrame(timer.value)
    }
  })
}
// const endloading=()=>{
//   const dom=barRefs.value as HTMLElement;
//   setTimeout(()=>{
//     window.requestAnimationFrame(()=>{
//       speed.value=100
//       dom.style.width=speed.value+"%"
//     })
//   },3000)
// }

defineExpose({
  startloading,
  // endloading,
})
</script>

<template>
<div class="process-container">
  <div class="bar" ref="barRefs"></div>
</div>
</template>

<style scoped lang="scss">
.process-container{
  position:fixed;
  top:0;
  width:100%;
  height:10px;
}
.bar{
  position: absolute;
  background: dodgerblue;
  width:0;
  height:100%;
}
</style>
